<template>
  <div>
    <p>水温{{ temp }}度</p>
    <p>水位{{ height }}cm</p>
    <button @click="changeTemp">修改水温</button>
    <button @click="changeHeight">修改水位</button>
  </div>
</template>

<script setup>
import { ref, watch, watchEffect } from "vue";
let temp = ref(10);
let height = ref(0);
function changeTemp() {
  temp.value += 10;
}
function changeHeight() {
  height.value += 10;
}

// 使用 watch - 明确监听 temp 和 height 的变化
//watch的写法：需求水温60度，水位80cm
watch(
  [temp, height],
  (val) => {
    console.log("watch被调用了立即执行~~");
    console.log(val);
    let [tp, ht] = val;
    if (tp > 60 || ht > 80) {
      console.log("watch警告！");
    }
  },
  { immediate: true } //immediate代表立即执行一次
);
//使用 watchEffect - 自动追踪回调中使用的响应式数据
//watchEffect的写法：需求水温60度，水位80cm
watchEffect(() => {
  console.log("watchEffect立即执行~~"); //watchEffect的默认是立即执行一次
  if (temp.value > 60 || height.value > 80) {
    console.log("watchEffect告警！！");
  }
});
</script>

<style scoped></style>
